<script setup>
import { ref, toRefs, defineExpose } from "vue";
import { useDrawerStore } from "@/store/drawerDataStores.js";
import { message } from "@/utils/message";

const frameFormatList = ref([
  {
    value: "250k",
    label: "250k"
  },
  {
    value: "500k",
    label: "500k"
  },
  {
    value: "750k",
    label: "750k"
  },

]);
const drawerStore = useDrawerStore();
const props = defineProps({
  devVarTableSelectedItem: {
    type: Object,
    default() {
      return {};
    }
  },
  publicForm: {
    type: Object,
    default() {
      return {};
    }
  }
});
const { devVarTableSelectedItem, publicForm } = toRefs(props);
const emit = defineEmits(["childFormObj"]);

const ruleFormPlcRef = ref(),
  ruleFormPlc = ref({
    frameFormat: "500k", // 波特率用的桢格式字段

  })

// 配置按钮
const configClick = () => {
  if (

    ruleFormPlc.value.frameFormat

  ) {

    let MQTTObj = {
      baud_rate: ruleFormPlc.value.frameFormat, //波特率

    };
    let SQLObj = {

      ...ruleFormPlc.value
    };
    let formObj = {
      MQTTObj: MQTTObj,
      SQLObj: SQLObj
    };
    emit("childFormObj", formObj);
  } else {
    message("请填写所有的数据", { type: "warning" });
  }
};
// 父组件调用清空函数
const clearVar = () => {
  const storeFormPlc = { ...drawerStore.ruleFormPlc };
  const storeFormLeft = { ...drawerStore.ruleFormLeft };
  const storeRTUForm = { ...drawerStore.RTUForm };
  ruleFormLeftRef.value.resetFields();
  ruleFormPlcRef.value.resetFields();
  ruleFormRef.value.resetFields();
  drawerStore.ruleFormPlc = { ...storeFormPlc };
  drawerStore.ruleFormLeft = { ...storeFormLeft };
  drawerStore.RTUForm = { ...storeRTUForm };
  tableData.value = [];
};
// 父组件调用保存函数
const saveStore = () => {
  drawerStore.ruleFormPlc = { ...ruleFormPlc.value };
  drawerStore.ruleFormLeft = { ...ruleFormLeft.value };
  drawerStore.RTUForm = { ...ruleForm.value };
  drawerStore.tableData = tableData.value;
};
// 父组件调用赋值函数
const copyStore = () => {
  if (devVarTableSelectedItem.value.state === 1) {
    ruleFormPlc.value = {
      frameFormat: devVarTableSelectedItem.value.frameFormat,
      dataBit: devVarTableSelectedItem.value.dataBit,
      stopBit: devVarTableSelectedItem.value.stopBit,
      verify: devVarTableSelectedItem.value.verify
    };
    ruleFormLeft.value.passiveIp = devVarTableSelectedItem.value.passiveIp;
    ruleForm.value = {
      protocolType: devVarTableSelectedItem.value.protocolType,
      protocolAddress: devVarTableSelectedItem.value.protocolAddress,
      protocolNumber: devVarTableSelectedItem.value.protocolNumber
    };
    tableData.value = [
      {
        protocolType: devVarTableSelectedItem.value.protocolType,
        protocolAddress: devVarTableSelectedItem.value.protocolAddress,
        protocolNumber: devVarTableSelectedItem.value.protocolNumber
      }
    ];
  } else {
    ruleFormPlc.value = drawerStore.ruleFormPlc;
    ruleFormLeft.value = drawerStore.ruleFormLeft;
    tableData.value = drawerStore.tableData;
    ruleForm.value = drawerStore.RTUForm;
  }
};
defineExpose({
  clearVar,
  saveStore,
  copyStore
});
</script>

<template>
  <div class="form-main">
    <el-form
      ref="ruleFormPlcRef"
      :model="ruleFormPlc"
      :inline="true"
      label-position="top"
    >
      <el-form-item
        label="波特率"
        prop="frameFormat"
        style="width: 100%; margin-right: 20px; "
      >
        <el-select v-model="ruleFormPlc.frameFormat" placeholder="请选择波特率">
          <el-option
            v-for="item in frameFormatList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item
        label="帧格式"
        prop="dataBit"
        style="width: 116px; margin-right: 20px"
      >
        <el-select v-model="ruleFormPlc.dataBit" placeholder="请选择帧格式">
          <el-option label="5" value="5" />
          <el-option label="6" value="6" />
          <el-option label="7" value="7" />
          <el-option label="8" value="8" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="帧类型"
        prop="stopBit"
        style="width: 116px; margin-right: 20px"
      >
        <el-select v-model="ruleFormPlc.stopBit" placeholder="请选择帧类型">
          <el-option label="1" value="1" />
          <el-option label="1.5" value="1.5" />
          <el-option label="2" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="帧ID"
        prop="verify"
        style="width: 116px; margin-right: 0px"
      >
        <el-select v-model="ruleFormPlc.verify" placeholder="请输入帧ID">
          <el-option label="None" value="None" />
          <el-option label="Odd" value="Odd" />
          <el-option label="Even" value="Even" />
          <el-option label="Mark" value="Mark" />
          <el-option label="Space" value="Space" />
        </el-select>
      </el-form-item> -->
    </el-form>
    <!-- <el-form ref="ruleFormLeftRef" :model="ruleFormLeft" :inline="false">
      <el-form-item label="从站IP" prop="passiveIp">
        <el-input
          v-model="ruleFormLeft.passiveIp"
          clearable
          placeholder="请输入从站IP"
        />
      </el-form-item>
    </el-form>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :inline="true"
      label-position="top"
    >
      <el-form-item
        label="类型"
        prop="protocolType"
        style="width: 110px; margin-right: 20px"
      >
        <el-select v-model="ruleForm.protocolType" placeholder="请选择类型">
          <el-option label="coil" value="coil" />
          <el-option label="register" value="register" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="地址"
        prop="protocolAddress"
        style="width: 110px; margin-right: 20px"
      >
        <el-input v-model="ruleForm.protocolAddress" placeholder="请输入地址" />
      </el-form-item>
      <el-form-item
        label="数量"
        prop="protocolNumber"
        style="width: 110px; margin-right: 20px"
      >
        <el-input v-model="ruleForm.protocolNumber" placeholder="请输入数量" />
      </el-form-item>
      <el-form-item style="width: 50px">
        <el-button type="primary" class="form-btn" @click="confirmClick"
          >确定</el-button
        >
      </el-form-item>
      <el-form-item style="width: 50px; margin-right: 0px">
        <el-button type="primary" class="form-btn" @click="deleteClick"
          >删除</el-button
        >
      </el-form-item>
    </el-form>
    <div class="form-table">
      <el-table
        ref="multipleTableRef"
        class="custom-table"
        :data="tableData"
        border
        stripe
        max-height="200"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" />
        <el-table-column prop="protocolType" label="类型" align="center" />
        <el-table-column prop="protocolAddress" label="地址" align="center" />
        <el-table-column prop="protocolNumber" label="数量" align="center" />
      </el-table>
    </div> -->
    <div class="config-btn">
      <el-button type="primary" @click="configClick">配置</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.form-btn {
  margin-top: 30px;
}

.form-table {
  padding-bottom: 20px;
}

.config-btn {
  text-align: right;
}
</style>
